<template>
	<view class="order-list-wrap">

		<view class="search-wrap">
			<view class="search-input-inner">
				<text class="search-input-icon iconfont iconsousuo" @click="searchOrder()"></text>
				<input class="search-input-text font-size-tag" maxlength="50" v-model="formData.search_text"
					:placeholder="'请输入商品名称'"
					@confirm="searchOrder()" />
			</view>
		</view>
		<view class="tab-block">
			<scroll-view scroll-x="true" class="scroll tab-wrap"
				:scroll-into-view="'tab' + reply_list" scroll-with-animation="true">
				<!-- #ifndef MP -->
				<block v-for="(item, index) in reply_list" :key="index">
					<view class="tab-item" @click="tabChange(item.type)"
						:class="{'active color-base-text color-base-bg-before':item.type == formData.is_reply}"
						:id="'tab' + (item.type)">
						<text>{{ item.name }}</text>
					</view>
				</block>
				<!-- #endif -->
			</scroll-view>
			<view class="choose" @click="showScreen = true">
				<text>筛选</text>
				<text class="iconfont iconshaixuan color-tip"></text>
			</view>
		</view>

		<!-- 筛选弹出框 -->
		<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
			<view class="title color-tip">筛选</view>
			<scroll-view scroll-y="true">
				<view class="item-wrap">
					<view class="label">
						<text>下单时间</text>
						<view class="more">
							<uni-tag :inverted="true" text="近7天" @click="dateSelect(7)" />
							<uni-tag :inverted="true" text="近30天" @click="dateSelect(30)" />
						</view>
					</view>
					<view class="value-wrap">
						<picker mode="date" @change="bindTimeStartChange" class="picker margin-right"
							:value="formData.start_time">
							<view class="uni-input">{{ formData.start_time ? formData.start_time : '开始时间' }}</view>
						</picker>
						<view class="h-line"></view>
						<picker mode="date" @change="bindTimeEndChange" class="picker margin-left"
							:value="formData.end_time">
							<view class="uni-input">{{ formData.end_time ? formData.end_time : '结束时间' }}</view>
						</picker>
					</view>
				</view>
				<view class="item-wrap">
					<view class="label"><text>评价类型 {{formData.explain_list  }}</text></view>
					<view class="list">
						<block v-for="(item, index) in explain_list" :key="index">
							<uni-tag :inverted="true" :text="item.name"
								:type="formData.explain_type == item.type ? 'primary' : 'default'"
								@click="uTag(item.type, 'explain_list')" />
						</block>
					</view>
				</view>
			</scroll-view>
			<view class="footer">
				<button type="default" @click="resetData">重置</button>
				<button type="primary" @click="screenData">确定</button>
			</view>
		</uni-drawer>

		<mescroll-uni class="list-wrap" @getData="getListData" top="210" ref="mescroll" :size="8">
			<block slot="list">
				<block v-if="orderList.length > 0">
					<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="toDetail(item)">
						<view class="head">
							<!-- 订单号: -->
							<text class="pay-type-name color-base-text"> {{ item.member_name }} </text>
							<text class="order-status">
								<view v-if="item.explain_type==1" class="evaluate-level">
									<image :src="$util.img('/app/shop/view/public/img/good_evaluate.png')"
										mode="widthFix">
									</image>
									<text class="evaluate-level-good">好评</text>
								</view>
								<view v-else-if="item.explain_type==2" class="evaluate-level">
									<image :src="$util.img('/app/shop/view/public/img/middel_evaluate.png')"
										mode="widthFix"></image>
									<text class="evaluate-level-middel">好评</text>
								</view>
								<view v-else class="evaluate-level">
									<image :src="$util.img('/app/shop/view/public/img/bad_evaluate.png')"
										mode="widthFix"></image>
									<text class="evaluate-level-bad">差评</text>
								</view>
							</text>
						</view>
						<view class="goods-item">
							<view class="goods-img">
								<image :src="$util.img(item.sku_image, { size: 'mid' })" mode="widthFix"></image>
							</view>
							<view class="info-wrap">
								<view class="name-wrap">{{ item.sku_name }}</view>

								<view class="more-wrap">
									<view class="price-wrap">
										<view class="price">
											<text class="unit">￥</text>
											<text>{{ item.sku_price }}</text>
										</view>
									</view>
								</view>
							</view>

						</view>
						<view class="total-wrap">
							<text class="create-time">评论时间：{{ $util.timeStampTurnTime(item.create_time) }}</text>


							<block v-if="item.is_audit==1">
								<button v-if="item.content!='' && item.explain_first=='' " type="primary" size="mini"
									@click.stop="replay(item.evaluate_id,0)">
									回复
								</button>
								<button v-else-if="item.again_content!='' && item.again_explain=='' " type="primary"
									size="mini" @click.stop="replay(item.evaluate_id,1)">
									追评回复
								</button>
							</block>
			
			
								<button v-if="item.content!='' && item.explain_first!='' " type="primary" size="mini"
									@click.stop="deleteContent(item.evaluate_id,0)">
									删除回复
								</button>
								<button v-if="item.again_content!='' && item.again_explain!='' " type="primary"
									size="mini" @click.stop="deleteContent(item.evaluate_id,1	)">
									删除追评
								</button>

						</view>
						<view class='ns-evaluate'>
							<view class='evaluate-member'>
								[用户评论]
							</view>
							<view class='evaluate-member-data'>
								<view class='evaluate-member-conten'>
									{{ item.content }}
								</view>
								<view class='evaluate-member-img'>
									<view class="img-item" v-for="(item2, index2) in item.imagesArray" :key="index2">
										<image :src="$util.img(item2)" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.explain_first" class='ns-evaluate'>
							<view class='evaluate-member'>
								[商家回复]
							</view>
							<view class='evaluate-member-data'>
								<view class='evaluate-member-conten'>
									{{ item.explain_first }}
								</view>
							</view>
						</view>
						<view v-if="item.again_content" class='ns-evaluate'>
							<view class='evaluate-member'>
								[[追加评论]
							</view>
							<view class='evaluate-member-data'>
								<view class='evaluate-member-conten'>
									{{ item.again_content }}
								</view>
								<view class='evaluate-member-img'>
									<view class="img-item" v-for="(item2, index2) in item.again_imagesArray"
										:key="index2">
										<image :src="$util.img(item2)" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>

						<view v-if="item.again_explain" class='ns-evaluate'>
							<view class='evaluate-member'>
								[商家回复]
							</view>
							<view class='evaluate-member-data'>
								<view class='evaluate-member-conten'>
									{{ item.again_explain }}
								</view>
							</view>
						</view>

					</view>
				</block>
				<ns-empty v-else text="暂无数据"></ns-empty>
			</block>
		</mescroll-uni>
		<ns-order-evaluate ref="orderEvaluate" :order="order"></ns-order-evaluate>
		<loading-cover ref="loadingCover"></loading-cover>
		<diy-bottom-nav :link-index='2'></diy-bottom-nav>
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	import nsOrderEvaluate from '@/components/ns-order-evaluate/ns-order-evaluate.vue';
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	import list from './js/evaluatelist.js';
	import action from './js/evaluate.js';
	export default {
		components: {
			uniDrawer,
			uniTag,
			nsOrderEvaluate,
		},
		mixins: [list, action]
	};
</script>

<style lang="scss">
	@import './css/list.scss';

	.evaluate-level {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		uni-image {
			width: 40rpx;
			height: 40rpx;
		}

		.evaluate-level-middel {
			color: #F35C21;
			margin-left: 8rpx;
		}

		.evaluate-level-good {
			color: #FFCA10;
			margin-left: 8rpx;
		}

		.evaluate-level-bad {
			color: #FF0000;
			margin-left: 8rpx;
		}

		.explain_text {
			margin-left: 5rpx;
		}
	}


	.ns-evaluate {
		display: flex;
		flex-direction: row;

		.evaluate-member {
			color: red;
		}

		.evaluate-member-data {
			width: 75%;
			overflow: hidden;

		}

		.evaluate-member-img {
			display: flex;


			uni-image {
				width: 75rpx;
				height: 75rpx;

			}
		}


	}
</style>